<template>
  <!-- 主页面 -->
  <div class="main">
    <router-view/>
    <van-tabbar
        v-model="active"
        active-color="#FFC200"
        inactive-color="#aaa">

      <van-tabbar-item icon="wap-home" @click="toPage('/home/index')">
        首页
      </van-tabbar-item>
      <van-tabbar-item icon="diamond" @click="toPage('/main/vip')">
        会员
      </van-tabbar-item>
      <van-tabbar-item icon="balance-list" @click="toPage('/book/list')">
        订单
      </van-tabbar-item>
      <van-tabbar-item icon="manager" @click="toPage('/mine/index')">
        我的
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup lang="ts">

import {ref,watch,computed} from "vue"
import {useRoute, useRouter} from "vue-router"

const route = useRoute();
const router = useRouter();

let toPage = (path) => {
  router.push(path);
}

let active = ref(0);
</script>

<style scoped>
   .main{
     padding-bottom: 50px;
     box-sizing: border-box;
   }
</style>